<template>
    <div class="box">
        <div class="header">
            <van-nav-bar title="订单页" @click-left="$router.go(-1)">
                <template #left>
                    <van-icon name="arrow-left" size="25" color='black' />
                </template>
            </van-nav-bar>
        </div>

        <div class="dizhi">
            <van-contact-card type="edit" :name="currentContact.name" :tel="currentContact.tel" @click="onEdit" />
        </div>

        <div class="gou">
            <van-card num="2" price="2.00" desc="描述信息" title="商品标题" thumb="https://img01.yzcdn.cn/vant/ipad.jpeg" />
            <van-cell-group>
                <van-cell title="配送" value="京东快递" />
                <van-cell title="退换无忧" value="商家赠送" />
                <van-cell title="留言" value="建议 留言前先与商家沟通确认" />
            </van-cell-group>
        </div>

        <div class="cell">
            <van-cell-group>
                <van-cell title="商品金额" value="￥520.00" />
                <van-cell title="运费" value="0.00" />
                <van-cell title="立减" value="-￥120.00" />
                <van-cell title="优惠券" value="无" is-link />
                <van-cell title="京豆(共1083个)" value="去选择" is-link />
                <van-cell title="礼品卡" value="无可用" is-link />
            </van-cell-group>
        </div>

        <van-popup v-model="show" position="bottom" :style="{ height: '50%' }">
            <van-password-input :value="value" info="密码为 6 位数字" :error-info="errorInfo" :focused="showKeyboard"
                @focus="showKeyboard = true" />
            <van-number-keyboard v-model="value" :show="showKeyboard" @blur="showKeyboard = false" />
        </van-popup>

        <van-submit-bar text-align="left" :price="3050" button-text="在线支付" @submit="onSubmit">
        </van-submit-bar>
    </div>
</template>

<script>
import { confirmOrder, updateOrderAddress } from "../../api/cart";
import Vue from 'vue';
import { NavBar, SubmitBar, Card, ContactCard, Toast, Cell, CellGroup, PasswordInput, NumberKeyboard, Popup } from 'vant';

Vue.use(NavBar);
Vue.use(SubmitBar);
Vue.use(Card);
Vue.use(ContactCard);
Vue.use(Toast);
Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(PasswordInput);
Vue.use(NumberKeyboard);
Vue.use(Popup);
export default {
    data() {
        return {
            currentContact: {
                name: '张三',
                tel: '13000000000',
            },
            value: '',
            errorInfo: '',
            showKeyboard: true,
            show: false,
        };
    },
    methods: {
        onEdit() {
            Toast('编辑');
            this.$router.push('/dizhi')
        },
        onSubmit() {
            this.show = true;
            confirmOrder({ userid: localStorage.getItem("userid"), time: localStorage.getItem("time") }).then(res => {
                console.log(res);
            })
        }
    },
    watch: {
        value(value) {
            if (value.length === 6 && value !== '123456') {
                this.errorInfo = '密码错误';
            } else if (value == '123456') {
                this.$router.push('/success')
                this.errorInfo = '';
            }
        },
    },
    created () {
        updateOrderAddress({userid:localStorage.getItem("userid")}).then(res=>{
            console.log(res);
        })
    }
}
</script>

<style scoped>
.box {
    background-color: beige;
}

.cell {
    margin-top: 0.1rem;
}
</style>